<template>
  <div class="content">
    <div>
      <div slot="top">
        <div class="titleXX">
          <div>
            <van-icon
              @click="TC"
              name="arrow-left"
              color="#ffffff"
              size="32"
              style="width: 15px"
            ></van-icon>
            <div class="title_WZ">{{ title }}</div>
          </div>
          <!-- <div class="useBackground"></div> -->
        </div>
        <div class="center">
          <div class="center_title">
            <div class="imgUser">
              <van-image
                width="100px"
                height="100px"
                shape="circle"
                :src="dataInfo.imgUrl"
                mode=""
              ></van-image>
            </div>
          </div>
          <!-- <div class="center_title" v-else>
            <div class="vantUpload">
            <van-uploader v-model="fileList" @oversize="onOversize" multiple :max-size="1000 * 1024" :max-count="1" />
            </div>
          </div> -->
          <div class="message_list">
            <div class="list_item">
              <div class="item_label" style="display: flex; justify-content: space-between">
                <div>姓名</div>
                <div
                  style="font-size: 12px; color: black; display: flex; align-items: center"
                  @click="editMessage"
                  v-if="editState"
                >
                  <van-icon name="edit" size="16" style="width: 16px"></van-icon>
                  编辑
                </div>
              </div>
              <div class="item_info">
                <van-field
                  :disabled="editState"
                  placeholder="姓名"
                  v-model="dataInfo.userName"
                  border="surround"
                  clearable
                >
                </van-field>
              </div>
            </div>
            <!-- <div class="list_item">
              <div class="item_label">性别</div>
              <div class="item_info">
                <van-field
                  :disabled="editState"
                  placeholder=""
                  border="surround"
                  v-model="dataInfo.gender"
                  clearable
                ></van-field>
              </div>
            </div> -->
            <div class="list_item">
              <div class="item_label">联系方式</div>
              <div class="item_info">
                <van-field
                  :disabled="editState"
                  placeholder="电话号码"
                  border="surround"
                  v-model="dataInfo.mobile"
                  clearable
                ></van-field>
              </div>
            </div>
            <!-- <div class="list_item">
              <div class="item_label">个人简介</div>
              <div class="item_info">
                <van-field
                type="textarea"
                  :disabled="editState"
                  placeholder="简介内容"
                  :border="true"
                  v-model="dataInfo.gender"
                  clearable
                >
                </van-field>
              </div>
            </div> -->
            <div class="confirm_Button" v-if="!editState" @click="editMessage">
              <div class="">保存</div>
            </div>
            <div class="cancel_Button" v-if="!editState" @click="editCancel">
              <div class="">取消</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { updateUser } from "@/api/realAssets/icsharedstation/my.js"
import { getpersonalInformation, setpersonalInformation } from "../common/RYXX"
import { selectUserPhone } from "@/api/realAssets/icsharedstation/home.js"
import { getandroidCode, setandroidCode } from "../common/auth"
import { Toast, Dialog } from "vant"

export default {
  data () {
    return {
      title: "个人详情",
      editState: [],
      fileList: [],
      dataInfo: {
        ishid: JSON.parse(getpersonalInformation()).ishid,
        imgUrl: require("../static/ry.png"),
        mobile: JSON.parse(getpersonalInformation()).mobile,
        userName: JSON.parse(getpersonalInformation()).userName,
        gender: JSON.parse(getpersonalInformation()).gender
      } // 最小日期
    }
  },
  methods:{
 editMessage () {
  this.editState = !this.editState
  if (this.editState == true) {
    updateUser({
      ishid: JSON.parse(getpersonalInformation()).ishid,
      userName: this.dataInfo.userName,
      gender: this.dataInfo.gender,
      mobile: this.dataInfo.mobile
    }).then((res) => {
      if (res.resultMessage === "SUCCESS") {
        selectUserPhone({
          ishid: getandroidCode()
        })
          .then((res) => {
            setpersonalInformation(res.data)
            dataInfo.value = {
              ishid: JSON.parse(getpersonalInformation()).ishid,
              imgUrl: require("../static/ry.png"),
              mobile: JSON.parse(getpersonalInformation()).mobile,
              userName: JSON.parse(getpersonalInformation()).userName,
              gender: JSON.parse(getpersonalInformation()).gender
            }
          })
          .catch((err) => {
            console.log(err)
          })
      } else {
        Toast.fail("更新失败")
      }
    })
  }
},
editCancel () {
  this.editState = true
  this.dataInfo = {
    ishid: JSON.parse(getpersonalInformation()).ishid,
    imgUrl: require("../static/ry.png"),
    mobile: JSON.parse(getpersonalInformation()).mobile,
    userName: JSON.parse(getpersonalInformation()).userName,
    gender: JSON.parse(getpersonalInformation()).gender
  }
},
TC () {
  this.$router.push({
    name: "rvicsharedstation-index"
  })
}
  }
}

//     const afterRead = async (userAvatar) => {
//   // eslint-disable-next-line no-undef
//   // 通过formData来封装文件，然后发送给后端
//   const formData = new FormData()
//   formData.append('file', userAvatar.file)
//   const res = await userUpdateAvatarService(formData)
//   console.log(res);

// }
// const userUpdateAvatarService = (formData) =>
// request 是自己封装的axios，可以自行封装，也可以直接使用axios发送请求
// axios.post('http://47.119.190.228:9006/api/fileOss/upload', formData, {
//   headers: {
//     'Content-Type': 'multipart/form-data'
//   }
// })
//   const onOversize = () => {
//     Toast('文件大小不能超过 1MB');
//   }
</script>

<style scoped lang="less">
.content {
  height: calc(100vh - 50px);
  width: 100%;
  background: url("../static/Homeimg/SYBJ1.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  z-index: 2;
}
.titleXX {
  position: relative;
  padding: 10px;
  padding-top: 20px;
  color: #fff;
  height: 100px;
  border-bottom-left-radius: 50px;
  z-index: 5;

  .title_WZ {
    position: absolute;
    left: 50%;
    top: 21px;
    transform: translate(-50%, 0px);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 5px;
    z-index: 10;
  }
}
.center {
  height: calc(100vh - 100px);
  background-color: #fff;
  border-top-right-radius: 45px;
  border-top-left-radius: 45px;
  .center_title {
    width: 100%;
    height: 77px;
    position: relative;
    .imgUser {
      position: absolute;
      z-index: 100;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .vantUpload {
      position: absolute;
      left: 50%;
      width: 100px;
      height: 100px;
      transform: translate(-50%, -50%);
      z-index: 99;
    }
  }
  .message_list {
    width: 90%;
    height: 100%;
    padding: 10px;
    margin: 0 auto;
    .list_item {
      margin: 10px 5px;
      .item_label {
        color: #666666;
        font-size: 18px;
        font-weight: 600;
      }
      .item_info {
        margin-top: 5px;
      }
    }
  }
}
.custom-prediv {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  .custom-prediv-item {
    display: flex;
    justify-content: center;
  }
}
.confirm_Button {
  width: 80%;
  height: 50px;
  margin: 0 auto;
  background-color: #36c2a8;
  text-align: center;
  border-radius: 20px;
  color: #fff;
  line-height: 50px;
  font-size: 16px;
  letter-spacing: 6px;
}
.cancel_Button {
  width: 80%;
  height: 50px;
  margin: 20px auto;
  background-color: #f0f0f0;
  text-align: center;
  border-radius: 20px;
  color: #666666;
  line-height: 50px;
  font-size: 17px;
  letter-spacing: 6px;
}
</style>
